<template>
  <div class="content">
    <div class="jsybDiv">
      <TitleVue :name="'降水预报'" />
      <div class="jsybContent">
        <div class="date-bg"></div>
        <div v-for="item in weaList" :key="item.id" class="day-wea-item">
          <div class="date flex-column">
            <span>周{{ item.day }}</span>
            <span>{{ item.date }}</span>
          </div>
          <div class="wea flex-column">
            <i style="font-size: 30px" :class="`qi-${item.iconDay}-fill`"></i>
            <span>{{ item.textDay }}</span>
          </div>
          <div class="temp flex-column">
            <span>{{ item.tempMin }}℃</span>
            <!-- <span style="transform: rotate(90deg)">～</span> -->
            <span>{{ item.tempMax }}℃</span>
          </div>
        </div>
      </div>
    </div>

    <div class="xsylDiv">
      <TitleVue :name="'逐小时雨量'" />
      <div id="hourRain"></div>
    </div>
    <div class="ldtDiv">
      <TitleVue :name="'雷达图'" />
      <div class="imgDiv">
        <img src="@/assets/img/common/tyldt.png" />
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import * as echarts from 'echarts'

export default {
  name: 'YbLeft',
  components: {
    TitleVue
  },
  data() {
    return {
      weaList: [
        {
          id: 1,
          day: '一',
          date: '03-27',
          iconDay: '101',
          textDay: '多云',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 2,
          day: '二',
          iconDay: '100',
          date: '03-28',
          textDay: '晴',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 3,
          day: '三',
          iconDay: '102',
          date: '03-29',
          textDay: '少云',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 4,
          day: '四',
          date: '03-30',
          iconDay: '104',
          textDay: '阴',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 5,
          day: '五',
          date: '03-30',
          iconDay: '100',
          textDay: '晴',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 6,
          day: '六',
          date: '03-30',
          iconDay: '305',
          textDay: '小雨',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 7,
          day: '日',
          date: '03-30',
          iconDay: '101',
          textDay: '多云',
          tempMin: 23,
          tempMax: 30
        }
      ],
      xData: ['13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00'],
      yDtata: [10, 12, 12, 3, 8, 12, 6, 8, 7, 5, 3]
    }
  },
  mounted() {
    this.initEchart(this.yDtata, this.xData)
  },
  methods: {
    initEchart(data, dataAxis) {
      let chartDom = document.getElementById('hourRain')
      if (this.myChart) {
        this.myChart.dispose()
        chartDom.innerHTML = ''
      }
      this.myChart = echarts.init(chartDom, 'macarons')
      let option = {
        grid: {
          left: '8%',
          right: '0',
          top: '10%',
          bottom: '12%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            color: '#0095FF'
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8FADCC'
          }
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#0389D6' },
                { offset: 1, color: '#FFFFFF' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#0389D6' },
                  { offset: 1, color: '#FFFFFF' }
                ])
              }
            },
            data: data
          }
        ]
      }
      option && this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .jsybDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .jsybContent {
      width: 100%;
      height: auto;
      padding: 0vh 1.2vw 1vh;
      box-sizing: border-box;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.5vh;
      color: #fff;
      display: flex;
      column-gap: 1vh;

      // .date-bg {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 6.4vh;
      //   background: #052846;
      //   z-index: 1;
      // }
      .day-wea-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        row-gap: 1vh;
        padding: 0.5vh 0;
        flex: 1;
        z-index: 100;
        &.active {
          border: 2px solid #184f71;
        }
      }
    }
  }
  .xsylDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    #hourRain {
      padding: 1vh 1.2vw;
      box-sizing: border-box;
      height: 20vh;
    }
  }
  .ldtDiv {
    flex: 1;
    overflow: hidden;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .imgDiv {
      flex: 1;
      padding: 1vh 1.2vw;
      box-sizing: border-box;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
